---
title: Styling
description: All components are designed to be styled using props.
---

## Overview

The list of major concepts provided by the library is as follows.

<LinkList
  items={[
    { label: "Style Props", href: "/docs/styling/style-props" },
    { label: "Conditional Styles", href: "/docs/styling/conditional-styles" },
    { label: "Responsive Design", href: "/docs/styling/responsive-design" },
    { label: "Color Mode", href: "/docs/styling/color-mode" },
    { label: "Color Scheme", href: "/docs/styling/color-scheme" },
    {
      label: "CSS Custom Properties",
      href: "/docs/styling/css-custom-properties",
    },
    { label: "CSS Value Functions", href: "/docs/styling/css-value-functions" },
    { label: "Interpolation", href: "/docs/styling/interpolation" },
    { label: "Animation", href: "/docs/styling/animation" },
    { label: "Focus Ring", href: "/docs/styling/focus-ring" },
    { label: "Global Styles", href: "/docs/styling/global-styles" },
    { label: "Reset Styles", href: "/docs/styling/reset-styles" },
    { label: "Layer Styles", href: "/docs/styling/layer-styles" },
    { label: "Text Styles", href: "/docs/styling/text-styles" },
    { label: "At-Rules", href: "/docs/styling/at-rules" },
    { label: "Cascade Layers", href: "/docs/styling/cascade-layers" },
  ]}
/>

## Usage

[Style Props](/docs/styling/style-props) allow you to apply styles to elements using props. Style Props conform to the [CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Properties) and provide all properties in camelCase.

```tsx preview
<Box p="md" bg="bg.contrast" color="fg.contrast">
  Box
</Box>
```

:::note
[Style Props](/docs/styling/style-props) uses [@mdn/browser-compat-data](https://github.com/mdn/browser-compat-data). When the library is updated, Style Props is also updated periodically.
:::
